<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
</head>
<style>
    ::-webkit-scrollbar {display:none}/*隐藏横向滚动条但可以滚动*/
    .layui-table-page {
        text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }
    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<!--数据表格样式及附件-->
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="search">
        <i class="layui-icon">&#xe615;</i>查看周报
    </a>
</script>
<!--搜索栏-->
<div class="layui-form-item" style="margin-bottom: -5px">
    <label class="layui-form-label" style="width: 90px">周报日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="stime" autocomplete="off">
        </div>
    <button type="button" id="cz" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 4px"><i class="layui-icon" style="font-size: 14px;">&#xe615;</i> 搜索</button>
</div>

<!--数据表格  数据表格使用的是方法渲染-->
<div class="utable">
    <table class="layui-table"
           lay-data="{width:1270,height:500, url:'/workdiary/workdiarydata', page:true, id:'tab',toolbar: '#toolbarDemo'}"
           lay-filter="tab">
        <thead>
        <tr>
            <th lay-data="{field:'worklogid', width:80}">编号</th>
            <th lay-data="{field:'emp_Name', edit: 'false',width:120}">员工名称</th>
            <th lay-data="{field:'Workday',width:120}">填写日期</th>
            <th lay-data="{field:'weekCur', edit: 'false'}">本周情况描述</th>
            <th lay-data="{field:'studentQuestion',edit: 'false'}">问题学生情况反馈</th>
            <th lay-data="{field:'Idea', edit: 'false'}">意见建议</th>
            <th lay-data="{field:'weekNext',edit: 'false'}">下周工作计划</th>
            <th lay-data="{fixed: 'right', title:'操作', toolbar: '#bar'}"></th>
        </tr>
        </thead>
    </table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">

    layui.use('laydate',function () {
        var laydate = layui.laydate;

        //日期范围
        laydate.render({
            elem: '#stime'
            ,range: true
            ,trigger: 'click'
        });
    });


    layui.use('table', function () {
        var table = layui.table;
        
        function search(id) {
            layer.open({
                type: 2,
                title: '查看周报',
                maxmin: true, //开启最大化最小化按钮
                area: ['700px', '600px'],
                content: '/workdiary/searchwork?worklogid='+id//这是链接你的页面地址 url
            })
        }

        $("#cz").on('click',function(){
            var stime=$("#stime").val();
            table.reload('tab', {
                where: {
                    stime:stime
                }
                ,page: {
                    curr: 1
                }
            });
        });

        //监听行工具事件
        table.on('tool(tab)', function (obj) {
            var data = obj.data;
            var id = data.worklogid;
            if (obj.event === 'search') {
                 search(id);
            }
        })
    });
</script>
</html>